import Base from "../base.js";
import OrderApi from "../../api/order.js"


export default class extends Base {
    // 设置初始数据
    data = {
        curPage: 1,
        eachPage: 5,
        total: 0,
        maxPage: 0,
        rows: [],
    }
    orderData = ``;
    render() {
        this.$el.html(`
            <div>
                <h1 style="margin:20px 0px 20px 50px">订单管理</h1>
                <table class="layui-table">
                    <thead>
                        <th>电影</th>
                        <th>影城</th>
                        <th>放映厅</th>
                        <th>放映时间</th>
                        <th>座位</th>
                        <th>票价</th>
                        <th>购买用户ID</th>
                    </thead>
                    <tbody class="order-list">

                    </tbody>
                </table>

                <section style="display:flex; ">
                    <div class="layui-btn-container" style="margin-left:50px;">
                        <button type="button" class="first-btn layui-btn layui-btn-primary layui-btn-radius layui-btn-sm">首页</button>
                        <button type="button" class="prev-btn layui-btn layui-btn-primary layui-btn-radius layui-btn-sm">上一页</button>
                        <button type="button" class="next-btn layui-btn layui-btn-primary layui-btn-radius layui-btn-sm">下一页</button>
                        <button type="button" class="last-btn layui-btn layui-btn-primary layui-btn-radius layui-btn-sm">尾页</button>
                    </div>
                    <div style="margin-left:20px;color:gray;">
                        当前页：<select class="curPage" style="padding:4px;border:1px solid #d2d2d2;"></select>
                        每页显示条数：<input type="text" name="eachPage" style="width:30px; height:20px;border:1px solid #d2d2d2;"/>
                        总条数：<span class="total"></span>
                    </div>
                </section>

            </div>
        `);
        this.$orderList = $(".order-list");
        this.$curPageEle = $(".curPage");
        this.$eachPageEle = $("input[name=eachPage]");
        this.$totalEle = $(".total");   
        this.$firstBtnlEle = $(".first-btn");
        this.$prevBtnlEle = $(".prev-btn");
        this.$nextBtnlEle = $(".next-btn");
        this.$lastBtnlEle = $(".last-btn");

    }

    rerender() {
        console.log(this.data.rows);
        const str = this.data.rows.map(item => {
            return `
                <tr>
                    <td>${item.movieData.name}</td>
                    <td>${item.cinemaData.name}</td>
                    <td>${item.theaterData.theatersName}</td>
                    <td>${item.showTime}</td>
                    <td>${item.seat.displayName}</td>
                    <td>${item.price}</td>
                    <td>${item.userId}</td>
                </tr>
            `
        })
        this.$orderList.html(str);
        // 添加分页数据
        let options = ``;
        for (let i = 1; i <= this.data.maxPage; i++) {
            options += `<option value="${i}">${i}</option>`
        }
        this.$curPageEle.html(options).val(this.data.curPage);
        this.$eachPageEle.val(this.data.eachPage);
        this.$totalEle.html(this.data.total);

    }


    changeCurpage() {
        this.data.curPage = ~~this.$curPageEle.val();
        this.getOrder();
    }
    changeEachPage() {
        this.data.eachPage = this.$eachPageEle.val();
        this.getOrder();
    }
    first() {
        if (this.data.curPage == 1) return;
        this.data.curPage = 1;
        this.getOrder();
    }
    last() {
        if (this.data.curPage == this.data.maxPage) return;
        this.data.curPage = this.data.maxPage;
        this.getOrder();
    }
    next() {
        if (this.data.curPage == this.data.maxPage) return;
        this.data.curPage++;
        this.getOrder();
    }
    prev() {
        if (this.data.curPage == 1) return;
        this.data.curPage--;
        this.getOrder();
    }
    handle() {
        // 分页绑定事件
        this.$curPageEle.on("change", this.changeCurpage.bind(this));
        this.$eachPageEle.on("blur", this.changeEachPage.bind(this));
        this.$firstBtnlEle.on("click", this.first.bind(this));
        this.$lastBtnlEle.on("click", this.last.bind(this));
        this.$nextBtnlEle.on("click", this.next.bind(this));
        this.$prevBtnlEle.on("click", this.prev.bind(this));
    }


    async getOrder() {
        const { curPage, eachPage } = this.data;
        // 获取订单数据
        const data = await OrderApi.getOrder({ curPage, eachPage });
        // 合并返回的数据
        Object.assign(this.data, data);
        this.rerender();

    }
    mounted() {
        this.getOrder();
    }
}
